<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cart</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <div class="container">
        <my-cart ></my-cart>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">

    var CartTitle = {
        props:['uname'],
        template: `
        <div class="title">{{uname}}的商品</div>
      `
    }

    var CartList = {
        props:['list'],
        template: `
        <div>
          <div class="item" v-for="(item,index) in list">
            <img :src="item.src"/>
            <div class="name">{{item.name}}</div>
            <div class="change">
              <a @click="changeNum(item.id,'desc')">－</a>
              <input type="text" class="num" :value="item.num" @blur="changeNum(item.id,'text',$event)" />
              <a @click="changeNum(item.id,'asc')">＋</a>
            </div>
            <div class="del" @click="del(item.id)">×</div>
          </div>
        </div>
      `,
        methods:{
            changeNum:function(id,act,event){
                let num=0;
                if(act=='text'){
                    num=event.target.value
                }

                this.$emit('changeNum',{
                    id:id,
                    act:act,
                    num:num
                })
            },

            del:function(id){
                this.$emit('delCart',id);
            }
        }
    }
    var CartTotal = {
        props:['list'],
        template: `
        <div class="total">
          <span>总价：{{totalPrice}}</span>
          <button>结算</button>
        </div>
      `,
        computed:{
            totalPrice:function(){
                let total=0;
                this.list.some((item)=>{
                    total+=item.num*item.price;
                })
                return total;
            }
        }
    }

    Vue.component('my-cart',{
        template: `
        <div class='cart'>
          <cart-title :uname="uname"></cart-title>
          <cart-list :list="list" @changeNum="handleNum($event)" @delCart="delCart($event)" ></cart-list>
          <cart-total :list="list"></cart-total>
        </div>
      `,
        components: {
            'cart-title': CartTitle,
            'cart-list': CartList,
            'cart-total': CartTotal
        },
        data:function(){
                return {
                    uname:'hkui',
                    list:[
                        {
                            id:1,
                            src:'img/a.jpg',
                            num:2,
                            price:1000,
                            name:'TCL彩电'
                        },
                        {
                            id:2,
                            src:'img/b.jpg',
                            num:1,
                            price:1000,
                            name:'机顶盒'
                        },
                        {
                            id:3,
                            src:'img/c.jpg',
                            num:1,
                            price:1000,
                            name:'海尔冰箱'
                        },
                        {
                            id:4,
                            src:'img/d.jpg',
                            num:1,
                            price:1000,
                            name:'小米手机'
                        },
                        {
                            id:5,
                            src:'img/e.jpg',
                            num:1,
                            price:1000,
                            name:'PPTV电视'
                        },
                    ],
                }
        },
        methods:{
            handleNum:function(obj){
                let act=obj.act;
                let id=obj.id;
                let num=obj.num;
                if(act =='asc'){
                    this.list.some(item=>{
                        if(item.id==id){
                            item.num=item.num+1
                            return true;
                        }
                    })
                }else if(act=='desc'){
                    this.list.some((item,index)=>{
                        if(item.id==id){
                            item.num=item.num-1
                            if(item.num<1){
                                this.list.splice(index,1);
                            }
                            return true;
                        }
                    })
                }else if(act=='text'){
                    this.list.some((item,index)=>{
                        if(item.id==id){
                            item.num=num
                            if(num<1){
                                this.list.splice(index,1);
                            }
                            return true;
                        }
                    })
                }

                console.log(obj)
            },
            delCart:function(id){
                let index=this.list.findIndex(item=>{
                    return id==item.id;
                })
                this.list.splice(index,1);
            }
        }
    });
    var vm = new Vue({
        el: '#app',


    });

</script>
</body>
</html>